<template>
	<view class="content">
		<view class="typeBox" >
			<view class="typeLeft">
				<view class="name">
					抬头类型:
				</view>
				<view class="wyyname">
					بېشىنى كۆتۈرۈپ تىپى
				</view>
			</view>
			<view @click="changeins(1)" class="danweiBox">
				<view :class="{active:ins==1}" class="dian " >
					<text></text>
				</view>
				<view class="right">
					<view class="name">
						单位
					</view>
					<view class="wyyname">
						ئورۇن
					</view>
				</view>
			</view>
				
			<view @click="changeins(2)" class="gerenBox">
				<view :class="{active:ins ==2}" class="dian">
					<text></text>
				</view>
				<view class="right">
					<view class="name">
						个人/非企业单位
					</view>
					<view class="wyyname">
					    شەخسىي / غەيرىي كارخانا
					</view>
				</view>
			</view>
		 </view> 
			
		<view class="taitoulist" v-if="ins == 1">
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">公司抬头:</text>
						<text class="wyyname">
							شىركەت باش كۆتۈرۈپ قالدى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入公司抬头" />
					    <text class="wyyname wyy">
							كىرگۈزۈڭ شىركىتى بېشىنى كۆتۈرۈپ
					    </text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">公司税号:</text>
						<text class="wyyname">
							شىركەت باج نومۇرى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入公司税号" />
					    <text class="wyyname wyy">
							كىرگۈزۈڭ شىركىتى باج نومۇرى
					    </text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">公司地址:</text>
						<text class="wyyname">
							شىركەت ئادرېسى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入公司地址" />
					    <text class="wyyname wyy">
							شىركەتنىڭ ئادرېسىنى كىرگۈزۈڭ
					    </text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">公司电话:</text>
						<text class="wyyname">
							شىركەت تېلېفون
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入公司电话" />
					    <text class="wyyname wyy">
							شىركەتنىڭ تېلېفون كىرگۈزۈڭ
				        </text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">开户银行:</text>
						<text class="wyyname">
							ھېساب ئاچقان بانكا
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入开户银行" />
					    <text class="wyyname wyy">
							ھېساب ئاچقان بانكا نامىنى كىرگۈزۈڭ
					    </text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">开户账号:</text>
						<text class="wyyname">
							ھېساب ئاچقان ھېسابات نومۇرى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入开户账号" />
					    <text class="wyyname wyy">
							ھېساب ئاچقان ھېسابات نومۇرى كىرگۈزۈڭ
					    </text>
					</view>
				</view>
		</view>
		
		<view class="gerenlist" v-else>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">抬头名称:</text>
						<text class="wyyname">
							بېشىنى كۆتۈرۈپ نامى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入抬头名称" />
					    <text class="wyyname wyy">
							كىرگۈزۈڭ بېشىنى كۆتۈرۈپ نامى
					    </text>
					</view>
				</view>
		</view>	
		
		<view class="foot">
			<view class="footText">
				*输入完整抬头信息，已开具增值税专用发票
			</view>
			<view class="footwyy">
				مۇكەممەل بېشىنى كۆتۈرۈپ ئۇچۇر كىرگۈزۈش، قوشۇلما قىممەت 
				بېجى مەخسۇس تالونى كېسىپ بەرگەن
			</view>
		</view>
		<view class="tianjiaBox">
			<text class="tianjia">确定</text>
			<text class="wyytianjia">
				بېكىتىش
			</text>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ins:1
			}
		},
		methods: {
			changeins(v){
				if(this.ins != v){
					this.ins = v
				}
			}
		}
	}
</script>

<style scoped>
.content{
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 80rpx;
}
.typeBox{
	padding: 42rpx 30rpx 30rpx 30rpx;
    display: flex;
	align-items: center;
	justify-content: space-between;
	color: #333333;
	background-color: #FFFFFF;
}
.gerenBox,.danweiBox{
	display: flex;
}
.right{
	padding-left: 18rpx;
}
.name{
	font-size: 30rpx;
	line-height: 30rpx;
}
.wyyname{
	font-size: 24rpx;
	padding-top: 18rpx;
}
.dian{
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	border: 1rpx #BFBFBF solid;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .1s ease-in-out;
}
.dian text{
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: transparent;
}
.active{
	transition: all .2s ease-in-out;
	border: 1rpx #FFC03C solid;
}
.active text{
	background-color: #FFC03C;
}
.foot{
	color:#AAAAAA;
	padding: 38rpx 140rpx 0;
}
.footText{
	font-size: 24rpx;
	line-height: 30rpx;
}
.footwyy{
	font-size: 20rpx;
	line-height: 24rpx;
	padding-top: 10rpx;
}
.tianjiaBox{
		width: 100vw;
		background-color: #FFC03C;
		padding: 22rpx 0 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		position: fixed;
		bottom: 0;
	}
	.wyytianjia{
		font-size: 24rpx;
		padding-top: 13rpx;
	}
	.gerenlist,.taitoulist{
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	.nameBox{
		border-top: 1rpx #eee solid;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
	}
	.nameLeft{
		display: flex;
		flex-direction: column;
	}
	.nameRight{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.inputname{
		font-size: 30rpx;
		text-align: right;
	}
	.wyy{
		color: #999999;
	}
</style>
